/*
 * @Author: ice
 * @Date: 2019-01-09 15:05:24
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-02-15 10:59:26
 */

<template>
    <div class="container bid-create-wrap">
        <el-form
            v-if="init"
            ref="mainform"
            :model="formData"
            label-position="right"
            status-icon
            :rules="formRule"
            label-width="145px"
            :disabled="false"
        >
            <!-- 赞助商设置 -->
            <div class="form-unit">
                <div class="form-title">资源类型设置</div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="type_name"
                    label="资源名称:"
                >
                    <el-input
                        placeholder="必填"
                        v-model="formData.type_name"
                        size="small"
                        class="task-input"
                    />
                    <span style="display:inline-block;color:#999;margin-left:12px">*资源类型名称字数不超过10字</span>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="type_logo"
                    label="资源图标:"
                >
                    <el-upload
                        class="avatar-uploader-customer"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :http-request="e=> {fnUpload(e, 'type_logo')}"
                        accept="image/*"
                    >
                        <img
                            v-if="formData.type_logo"
                            :src="formData.type_logo"
                            class="avatar"
                        >
                        <i
                            v-else
                            class="el-icon-plus avatar-uploader-icon"
                        />
                    </el-upload>
                    <span style="display:inline-block;color:#999;margin-left:12px">*请上传 45*45 jpg/png文件</span>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="type_link_status"
                    label="是否需要链接:"
                >
                    <el-switch
                        v-model="formData.type_link_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <br>
                    <el-input
                        placeholder="请填写示例链接"
                        v-if="formData.type_link_status == 1"
                        v-model="formData.type_link_demo"
                        size="small"
                        class="task-input"
                    />
                </el-form-item>

                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="type_price_status"
                    label="需要填写多个价格:"
                >
                    <el-switch
                        :disabled="!!type_no"
                        v-model="formData.type_price_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                    <template v-if="formData.type_price_status == 1">
                        <el-button
                            type="text"
                            @click="fnAddPrice()"
                        >添加</el-button>
                        <div class="price-list">
                            <div
                                class="price-list-item"
                                v-for="(item, index) in formData.type_price_list"
                                :key="index"
                            >
                                <el-input
                                    class="price-list-item-input"
                                    v-model="item.name"
                                    placeholder="请输入报价名称"
                                />
                                <div class="operate">
                                    <el-button
                                        type="text"
                                        v-if="item.enable == 1"
                                        @click="item.enable = 0"
                                    >禁用</el-button>
                                    <el-button
                                        type="text"
                                        v-else
                                        @click="item.enable = 1"
                                    >启用</el-button>
                                    <el-button
                                        type="text"
                                        v-if="formData.type_price_list.length > 2 && !item.no"
                                        @click="formData.type_price_list.splice(index, 1)"
                                    >删除</el-button>
                                </div>

                            </div>
                        </div>
                    </template>
                </el-form-item>

                <el-form-item
                    label="是否需要填写数量:"
                    prop="type_num_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_num_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="示例图片"
                    prop="type_image_demo"
                >
                    <p><el-switch
                        v-model="formData.type_image_status"
                        :active-value="1"
                        :inactive-value="0"
                    /></p>
                    <el-upload
                        v-show="formData.type_image_status == 1"
                        class="avatar-uploader-customer"
                        drag
                        action=""
                        :show-file-list="false"
                        :http-request="e=> {fnUpload(e, 'type_image_demo')}"
                        accept="image/*"
                    >
                        <div
                            v-if="formData.type_image_demo"
                            :style="'background-image: url('+formData.type_image_demo+')'"
                            class="upload-show"
                        />
                        <template v-else>
                            <i class="el-icon-upload" />
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </template>
                    </el-upload>
                    <span
                        style="display:inline-block;color:#999;margin-left:12px"
                        v-show="formData.type_image_status == 1">*只能上传jpg/png文件</span>
                </el-form-item>

                <el-form-item
                    label="是否需要阅读量:"
                    prop="type_read_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_read_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="是否需要PV/UV数:"
                    prop="type_upv_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_upv_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="是否需要广告位编号:"
                    prop="type_space_no_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_space_no_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="是否需要校区:"
                    prop="type_campus_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_campus_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="是否需要地理位置:"
                    prop="type_position_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_position_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="是否需要位置描述:"
                    prop="type_position_info_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_position_info_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="是否需要属性:"
                    prop="type_attribute_status"
                    required
                >
                    <el-switch
                        v-model="formData.type_attribute_status"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="是否需要备注:"
                    prop="type_show_remark"
                    required
                >
                    <el-switch
                        v-model="formData.type_show_remark"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>

                <el-form-item
                    label="备注内容(内部展示)"
                    prop="type_remark_tip"
                >
                    <el-input
                        placeholder="必填"
                        v-model="formData.type_remark_tip"
                        size="small"
                        class="task-input"
                    />
                </el-form-item>
                <el-form-item
                    label="序号"
                    prop="type_sort"
                >
                    <el-input
                        type="number"
                        placeholder="必填"
                        v-model="formData.type_sort"
                        @change="fnChangeNumber('type_sort')"
                        size="small"
                        class="task-input"
                    />
                    <span style="display:inline-block;color:#999;margin-left:12px">序号越小的越排在前面</span>
                </el-form-item>

            </div>

            <div class="form-unit">
                <div class="operate-baar">
                    <el-button
                        size="medium"
                        :disabled="type_no ? true : false"
                        @click="fnReset()"
                    >重置</el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="fnSubmit()"
                    >提交</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import ueditor from '@/components/common/ueditor.vue';
import regin from '@/assets/js/regin.min.js';
export default {
    components: { ueditor },
    data() {
        var validateImageDemo = (rule, value, callback) => {
            if (this.formData.type_image_status == 1 && !value) {
                return callback(new Error('请上传示例图片'));
            }else{
                callback();
            }
        };

        return {
            authResult: {},
            breadcrumbList: [
                {
                    title: "广告系统",
                },
                {
                    title: "资源类型列表",
                    name: 'resourceTypeList',
                },
                {
                    title: '新增资源类型'
                }
            ],
            type_no: '',
            formData: {
                "type_no": "",
                "type_name": "",
                "type_logo": "",
                "type_num_status": 0,
                "type_link_status": 1,
                "type_link_demo": "",
                "type_price_status": 0,
                "type_price_list": [
                    {
                        "no": "",
                        "name": "",
                        "enable": 1
                    },
                    {
                        "no": "",
                        "name": "",
                        "enable": 1
                    }
                ],
                "type_image_status": 0,
                "type_image_demo": "",
                // TODO 这个没有
                "type_remark_tip": "",
                "type_sort": 10,
                "type_read_status": 0,
                "type_upv_status": 0,
                "type_space_no_status": 0,
                "type_campus_status": 0,
                "type_position_status": 0,
                "type_position_info_status": 0,
                "type_attribute_status": 0,
                "type_show_remark": 0
            },
            formRule: {
                type_name: [
                    { required: true, message: '请输入赞助商名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字', trigger: 'blur' }
                ],
                type_logo: [
                    { required: true, message: '请上传资源图标', trigger: 'change' }
                ],
                type_image_demo: [
                    { validator: validateImageDemo, trigger: 'change' }
                ],
                type_remark_tip: [
                    { required: true, message: '请输入备注内容', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字', trigger: 'blur' }
                ],
                type_sort: [
                    { required: true, message: '请输入序号', trigger: 'blur' },
                ],
                type_price_status: [
                    { required: true, message: '请输入序号', trigger: 'blur' },
                    { validator: this.validatePrice, message: '', trigger: 'blur' }
                ]
            },
            submitting: false,
            init: false,
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        if (this.$route.query.type_no) {
            this.type_no = this.$route.query.type_no;
            this.breadcrumbList[2].title = '资源类型编辑';
        }
        this.$store.commit('SET_HEADER', this.breadcrumbList);

        this.type_no = this.$route.query.type_no ? this.$route.query.type_no : '';

        if (!this.type_no) {
            this.init = true;
        } else {
            this.fnGetData();
        }
    },
    methods: {
        validatePrice(rule, value, callback) {
            if (value == 0) {
                callback();
                return;
            }
            if (this.formData.type_price_list.length < 2) {
                callback(new Error('请至少添加两个报价'));
                return;
            }
            for (var i in this.formData.type_price_list) {
                if (!this.formData.type_price_list[i].name) {
                    callback(new Error('请填写报价名称'));
                    return;
                }
            }
            callback();
        },
        /** 将数字改为大于0的正整数 */
        fnChangeNumber(field) {
            if (this.formData[field] < 1) {
                this.formData[field] = 10;
            } else if ((this.formData[field] + '').indexOf('.') >= 0) {
                this.formData[field] = (this.formData[field] + '').split('.')[0];
            }
        },
        fnGetData() {
            this.$post('/wei4/resource_type%5Cget', {
                type_no: this.type_no
            }, resp => {
                if (resp.code == 1) {
                    this.formData = resp.data;
                    this.init = true;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnSubmit() {
            if (this.submitting) {
                return;
            }
            this.$refs.mainform.validate(valid => {
                if (valid) {
                    this.submitting = true;

                    let data = {
                        "type_no": this.type_no,
                        "type_name": this.formData.type_name,
                        "type_logo": this.formData.type_logo,
                        "type_num_status": this.formData.type_num_status,
                        "type_link_status": this.formData.type_link_status,
                        "type_link_demo": this.formData.type_link_demo,
                        "type_price_status": this.formData.type_price_status,
                        "type_price_json": JSON.stringify(this.formData.type_price_list),
                        "type_image_status": this.formData.type_image_status,
                        "type_image_demo": this.formData.type_image_demo,
                        "type_remark_tip": this.formData.type_remark_tip,
                        "type_sort": this.formData.type_sort,
                        "type_read_status": this.formData.type_read_status,
                        "type_upv_status": this.formData.type_upv_status,
                        "type_space_no_status": this.formData.type_space_no_status,
                        "type_campus_status": this.formData.type_campus_status,
                        "type_position_status": this.formData.type_position_status,
                        "type_position_info_status": this.formData.type_position_info_status,
                        "type_attribute_status": this.formData.type_attribute_status,
                        "type_show_remark": this.formData.type_show_remark
                    };

                    this.$post('/wei4/resource_type%5Csave', data, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                center: true,
                                message: '操作成功'
                            });
                            this.$router.push({
                                name: 'resourceTypeList'
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                center: true,
                                message: resp.msg
                            });
                        }
                        this.submitting = false;
                    });

                }
            });
        },
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        fnUpload(e, field) {
            this.fnUploadImage(e, (resp) => {
                this.formData[field] = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },
        fnReset() {
            this.$refs.mainform.resetFields();
        },
        fnAddPrice() {
            this.formData.type_price_list.push({
                "no": "",
                "name": "",
                "enable": 1
            });
        }
    },
};
</script>

<style lang="less" scoped>
  .margin-top {
    margin-top: 15px;
  }
  .bid-create-wrap {
    background: #fff;
    margin: 15px;
    margin-bottom: 0;
    padding: 30px;
    overflow: auto;
  }
  .form-unit {
    margin-bottom: 40px;
  }
  .form-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 18px;
    padding: 0 10px;
    border-left: 2px solid #1890ff;
    margin-bottom: 20px;
  }
  .task-input {
    width: 435px !important;
  }
  .money-line {
    width: 35px;
    text-align: center;
  }
  .money-wrap {
    display: inline-block;
    width: 200px;
  }
  .money-input {
    width: 200px !important;
  }
  .task-intro-input {
    width: 750px;
  }
  .table-inner-input {
    outline: none;
    line-height: 20px;
    font-size: 14px;
    width: 100%;
    background: transparent;
    text-align: center;
    cursor: pointer;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  .input-width-delete {
    margin-top: 15px;
    font-size: 0;
    .task-input {
      margin-right: 10px;
    }
  }

  .operate-baar {
    width: 100%;
    text-align: center;
    margin-top: 60px;
  }
  .preview-image {
    width: 120px;
    height: 120px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .pic-width-delete {
    margin-top: 15px;
    float: left;
    margin-right: 60px;
    display: inline-block;
    width: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .pic-unit {
      flex: 1;
      margin-right: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 15px;
      border-radius: 4px;
      border: 1px solid rgba(217, 217, 217, 1);
      &-index {
        width: 28px;
        height: 28px;
        background: rgba(243, 250, 255, 1);
        border: 1px solid rgba(24, 144, 255, 1);
        margin-right: 15px;
        border-radius: 28px;
        text-align: center;
        line-height: 28px;
        color: rgba(24, 144, 255, 1);
      }
      &-detail {
        flex: 1;
      }
      &-desc {
        width: 100%;
      }
      &-textarea {
        resize: none;
        width: 100%;
        height: 44px;
        line-height: 20px;
        border: 0;
        outline: 0;
      }
      .pic-value {
        width: 100%;
        height: 215px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #f6f6f6;
        position: relative;
        .loading {
          width: 100%;
          height: 100%;
          line-height: 215px;
          background: rgba(0, 0, 0, 0.3);
          transition: opacity 0.3s ease-in-out;
        }
        .tip {
          font-size: 14px;
          color: #fff;
          line-height: 215px;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
        }
        &:hover {
          .loading {
            opacity: 0;
          }
          .tip {
            opacity: 1;
          }
        }
      }
      .pic-empty-container {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .pic-empty-plus {
        font-size: 24px;
        width: 24px;
        line-height: 24px !important;
        color: rgba(0, 0, 0, 0.45);
      }
      .pic-empty-desc {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
      }
    }
  }
  .upload-list {
    margin-top: 10px;
  }
  .editor-wrap {
    position: relative;
  }
  .uploaded-image {
    width: 360px;
    height: 180px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    &:hover {
      .icon-delete {
        display: inline-block;
      }
    }
    .icon-delete {
      margin-top: 90px;
      transform: translateY(-50%);
      display: none;
    }
  }
  .price-list {
    width: 450px;
    &-item {
      display: flex;
      align-items: center;
      margin-bottom:5px;
      .operate {
        width: 106px;
      }
      &-input {
        flex: 1;
        margin-right: 10px;
      }
    }
  }
  .upload-show {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
</style>
<style lang="less">
  .avatar-uploader-customer {
    display: inline-block;
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
  .provence-list {
    .el-checkbox {
      margin-left: 0;
      margin-right: 30px;
    }
  }
</style>
